<template>
    <div class="falling-flower-container">
        <img :src="imgsrc" v-for="(item, i) in flowerList"
            :style="{ animationPlayState: animationState, '--t': item.t + 's', '--d': item.d + 's', '--x': item.x + '%' }">
        <div class="falling-flower-bts">
            <button class="falling-flower-bt" @click="fallSnow">落雪</button>
            <button class="falling-flower-bt" @click="fallFlower">落花</button>
        </div>
    </div>
</template>

<script>

export default {
    name: "FallingFlower",
    props: ["flowers"],
    data() {
        return {
            animationState: "paused",
            animationPaused: "paused",
            animationRunning: "running",
            imgsrc: "",
            imgflower: "/img/specialeffects/flower2.png",
            imgsnow: "/img/specialeffects/snow2.png",
            flowerList: [
                {
                    t: 20,
                    d: 0,
                    x: "20",
                },
                {
                    t: 12,
                    d: 7,
                    x: "5",
                },
                {
                    t: 10,
                    d: 2,
                    x: "2",
                },
                {
                    t: 25,
                    d: 5,
                    x: "10",
                },
                {
                    t: 24,
                    d: 3,
                    x: "70",
                },
                {
                    t: 17,
                    d: 2,
                    x: "50",
                },
                {
                    t: 11,
                    d: 5,
                    x: "80",
                },
                {
                    t: 15,
                    d: 2,
                    x: "65",
                },
                {
                    t: 20,
                    d: 0,
                    x: "21",
                },
                {
                    t: 12,
                    d: 1,
                    x: "15",
                },
                {
                    t: 19,
                    d: 2,
                    x: "26",
                },
                {
                    t: 18,
                    d: 5,
                    x: "40",
                },
                {
                    t: 14,
                    d: 3,
                    x: "60",
                },
                {
                    t: 16,
                    d: 0,
                    x: "58",
                },
                {
                    t: 31,
                    d: 1,
                    x: "82",
                },
                {
                    t: 15,
                    d: 4,
                    x: "95",
                },
            ],
        }
    },
    computed: {},
    methods: {
        //落雪
        fallSnow() {
            this.animationState = this.animationRunning;
            this.imgsrc = this.imgsnow;
        },
        //落花
        fallFlower() {
            this.animationState = this.animationRunning;
            this.imgsrc = this.imgflower;
        }
    },
    created() {
        if (this.$props.flowers) {
            this.flowerList = this.$props.flowers;
        }
    },
    mounted() {

    }
}
</script>

<style scoped>
.falling-flower-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    user-select: none;
}

.falling-flower-container>img {
    width: 20px;
    height: 20px;
    top: -20px;
    left: calc(var(--x) + 1px);
    position: absolute;
    opacity: 0;
    animation: falling var(--t) var(--d) linear infinite;
}

@keyframes falling {
    0% {
        transform: translateX(20px) rotate(0deg);
    }

    10% {
        opacity: 1;
    }

    30% {
        transform: translateX(0px) rotate(45deg);
    }

    50% {
        transform: translateX(-20px) rotate(90deg);
    }

    70% {
        transform: translateX(0px) rotate(45deg);
    }

    90% {
        transform: translateX(20px) rotate(0deg);
    }

    100% {
        top: 110%;
        transform: translateX(20px) rotate(0deg);
    }
}

.falling-flower-bts {
    position: absolute;
    width: 60%;
    height: 40%;
    top: 50%;
    left: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.falling-flower-bt {
    margin: 10px;
}
</style>